<template>
    <div class="text-node">
        <Handle type="source" :position="Position.Right"    :id="`${id}-bottom`"/>
        <!-- <h1 class="text-title">文本节点</h1>
        <div class="text-content">这里是 text 节点的自定义内容，可以随意写模版和样式。</div>
        <Handle type="source" :position="Position.Bottom" /> -->

        <VueFlowGroupCard :data="data" @click="usss">
            <div class="text-content">
                <!-- 监听输入框的 input 事件，并在数据变化时发出 updateData 事件 -->
                <input :value="data.content" @input="updateContent" class="text-input" placeholder="请输入内容"/>
            </div>
        </VueFlowGroupCard>

        <Handle
            type="source"
            :position="Position.Bottom"
            :id="`${id}-bottom`"
            class="handle handle-bottom"
        />
    </div>
</template>

<script setup lang="ts">
import { Handle, Position } from '@vue-flow/core'
import VueFlowGroupCard from '../../groupCard/index.vue'
import { defineEmits } from 'vue'

const props = defineProps({
    id: { type: String, required: true },
    data: { type: Object, default: () => ({}) }
})

// 定义一个自定义事件 updateData
const emit = defineEmits(['updateData' , 'attr'])   

// 输入框 input 事件处理函数，发出 updateData 事件
const updateContent = (event: Event) => {
    const target = event.target as HTMLInputElement
    // 发出事件，传递节点 ID 和更新后的数据
    emit('updateData', { id: props.id, content: target.value })
}

const usss = () => {
    emit('attr' , props.data)
}
</script>

<style scoped>
.text-node {
    padding: 10px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    min-width: 120px;
}

.text-title {
    font-size: 18px;
    color: #1976d2;
    margin-bottom: 6px;
    text-align: center;
}

.text-content {
    font-size: 14px;
    color: #666;
    text-align: center;
}

.text-input {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.handle {
    width: 8px;
    height: 8px;
    background: #1976d2;
    border: 2px solid #fff;
    border-radius: 50%;
}

.handle-bottom {
    bottom: -4px;
}
</style>
